<template>
	<om-page :title="pageTitle">
		<view class="page__bd">
			<uni-list>
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item 
					:showArrow="false"
					:title="item.userName" 
					:note="(item.instName?item.instName:'') +'-'+ (item.posName?item.posName:'')" 
					:data-index="index" 
					:avatar="index + 1" 
					:avatarBgColor="getAvatarBgColor(index)">
						<view slot="footer">
						  <view v-if="item.days === item.maxNum">
							<view class="text-xs">连续旷工天数:<text class="padding-sm round bg-gradual-red">{{item.days}}+</text></view>
						  </view>
						  <view v-else>
							<view class="text-xs">连续旷工天数:<text class="padding-sm round bg-gradual-orange">{{item.days}}</text></view>
						  </view>
						</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
	import listLoad from '../../../static/js/listLoad.js';
	export default {
		data() {
			return {
				scrollTop: 0,
				commonData:{},
				pageTitle:""
			}
		},
		methods: {
			getAvatarBgColor(index){
				if(index < 3){
					return this.ColorList[index].name
				}
				if(index < 10){
					return this.ColorList[3].name
				}
				return this.ColorList[4].name
			}
		},
		onLoad: function(options) {
			let _that = this;
			this.pageTitle = options.title || "异常考勤"
			uni.setNavigationBarTitle({
				title: this.pageTitle
			});
			listLoad.initData(this,'wxAttend/getUnattendDayInfoList')
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onPullDownRefresh: function() {
			listLoad.pullDownRefresh(this)
		},
		
		onReachBottom: function() {
			listLoad.reachBottom(this)
		}
	}
</script>
